<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="bar_ref"></div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },
  created () {
    console.log("chuangjian")
  },
  mounted () {
    this.initChart();
    this.isReady = true
    this.getData()
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed () {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.bar_ref);
    },
    //获取服务器数据 后续接口获取数据方法处

    getData () {
      if (this.dashboardData = null) return
      let chartData = this.dashboardData.onlineDayPopulation
      let legendData = []
      chartData = chartData.map((item) => {
        if (item.college != null) {
          legendData.push(item.college)
        }
        else if (item.dormitory != null) {
          legendData.push(item.dormitory)
        }
        else {
          legendData.push(item.major + item.grade)
        }

        return {
          type: "bar",
          data: item.population,
          coordinateSystem: "polar",
          name: item.dormitory != null ? item.dormitory : item.college != null ? item.college : item.major + item.grade,
          stack: "a",
          emphasis: {
            focus: "series",
          }
        }
      })
      this.updataChart(chartData, legendData);
    },
    //更新图表
    updataChart (chartData, legendData) {
      const option = {
        angleAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          splitLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          },
          axisLine: {
            lineStyle: {
              color: "rgb(116, 215, 226)",
              width: "3",
            },
          },
        },
        radiusAxis: {
          axisLabel: {
            margin: -8
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255,0.6)",
              width: "1",

            },

          },
          splitArea: {
            show: false,
          },
          z: 20
        },
        tooltip: {},
        polar: {},
        series: chartData,
        legend: {
          show: true,
          bottom: 0,
          itemGap: 2,
          data: legendData,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12
          }
        },
      };
      this.chartInstance.setOption(option);
    },
    screenAdapter () {
      //   const titleFontSize = (this.$refs.internet_ref / 100) * 3.6;
      //   const innerRadius = titleFontSize * 2;
      //   const outterRadius = innerRadius * 1.125;
      //   const adapterOption = {
      //     title: {
      //       textStyle: {
      //         fontSize: titleFontSize,
      //       },
      //     },
      //     series: [
      //       {
      //         type: "pie",
      //         label: {
      //           fontSize: titleFontSize,
      //         },
      //       },
      //     ],
      //   };
      //   this.chartInstance.setOption(adapterOption);
      //   this.chartInstance.resize();
    },
  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
        }

      }
    }
  }
};
</script>

<style>
</style>